<template>
  <div class="comment">
    <!-- 评论列表 -->
    <!-- 设置Vant组件list 提供的 @load上滑获取列表方法(分页) 实现评论加载 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="item van-hairline--bottom van-hairline--top" v-for="(comment,index) in list" :key="index">
        <!-- 动态获取评论用户的头像 -->
        <van-image round width="1rem" height="1rem" fit="fill" :src="comment.aut_photo" />
        <div class="info">
          <p>
            <span class="name">{{comment.aut_name}}</span>
            <span style="float:right">
              <span class="van-icon van-icon-good-job-o zan"></span>
              <span class="count">{{comment.like_count}}</span>
            </span>
          </p>
          <p>{{comment.content}}</p>
          <p>
            <span class="time">{{comment.pubdate|formatTime}}</span>&nbsp;
            <van-tag plain @click="showReply=true">{{comment.reply_count}}</van-tag>
          </p>
        </div>
      </div>
    </van-list>
    <!-- 底部输入框 -->
    <div class="reply-container van-hairline--top">
      <van-field v-model="value" placeholder="写评论...">
        <span class="submit" slot="button" @click="sendComment">提交</span>
      </van-field>
    </div>
  </div>
</template>
<script>
// 导入获取评论的api接口
import { getComments, comment } from '../api/search'
export default {
  name: 'ArticleComment',
  props: {
    // 获取父组件传来的文章id值 用于获取用户评论
    articleId: {
      type: String
    }
  },
  data () {
    return {
      // 评论的内容 v-model双向绑定页面评论输入
      value: '',
      // 评论列表加载状态位  Vant插件的list功能
      // 单次加载的状态位
      loading: false,
      // 加载完成的状态位
      finished: false,
      // 分页参数(评论数据的id)设置为null是从第一条评论开始获取(不传值默认第一条)
      offset: null,
      // 储存服务器返回的评论数据
      list: []
    }
  },
  methods: {
    // 设置获取评论数据的方法
    async onLoad () {
      // 参数1 根据改文章的id 父组件传入的数值
      // 参数2 分页参数(评论数据的id) 第一条获取默认设置null
      const ret = await getComments(this.articleId, this.offset)
      // 把回去的评论输入 全部添加到页面数据中储存
      this.list.push(...ret.data.results)
      // 修改本次加载的状态位
      this.loading = false
      // 判断结束的条件(评论分页是根据评论数据id来加载分页的 如果不返回新的评论数据id 就说明已经没有评论了)
      // last_id是服务器返回的新评论id 需要把页面的分页参数(评论数据id)设置为 服务器返回的新评论数据id
      // 如果为空(false)说明没有数据了 设置分页加载完毕的状态位
      if (ret.data.last_id) { // 如果还有新数据(true) 继续加载评论分页
        // 把服务器返回的新评论id 设置给页面的分页参数(评论数据id)
        this.offset = ret.data.last_id
      } else {
        // 如果服务器不返回新的评论id 说明已经没有评论数据了 把加载完整状态位设置为true
        this.finished = true
      }
    },
    // ~ 设置发表评论的方法
    async sendComment () {
      // 发表评论
      try {
        // 调用发表评论的接口 上传评论数据
        await comment({
          // 发表评论 需要两个参数 文章的id 和 评论的内容
          target: this.articleId, // 文章的id 左侧是服务器规定的属性名
          content: this.value // 评论的内容 左侧是服务器规定的属性名
        })
        this.list.splice(0, 0, this.value)
        // 发表评论成功后 置空储存的之前评论
        this.list = []
        // 发表评论成功后 置空分页参数 重新获取评论数据
        this.offset = null
        // 调用获取评论数据的方法 重新获取评论数据
        this.onLoad()
        // 置空评论的输入框
        this.value = ''
      } catch (error) {
        // 如果评论失败 提示用户
        this.$toast('评论文章失败')
      }
    }
  }
}
</script>
<style scoped lang='less'>
.comment {
  margin-top: 20px;
  /deep/ .item {
    display: flex;
    padding: 20px 0;
    .info {
      flex: 1;
      padding-left: 20px;
      .name {
        color: #069;
      }
      .zan {
        vertical-align: middle;
        padding-right: 4px;
      }
      .count {
        vertical-align: middle;
        font-size: 20px;
        color: #666;
      }
      .time {
        color: #666;
      }
      p {
        padding: 10px 0;
        margin: 0;
      }
    }
  }
  /deep/ .van-button:active::before {
    background: transparent;
  }
}
.reply-container {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 88px;
  width: 100%;
  background: #f5f5f5;
  z-index: 9999;
  .submit {
    font-size: 24px;
    color: #3296fa;
  }
}
</style>
